//index.js
//获取应用实例
const app = getApp()
// 这里写你的js路径
var QQMapWX = require('../../utils/qqmap-wx-jssdk.min');
var qqmapsdk;
Page({
  data: {
    hasCar: true, // 是否有车辆
    plateNumber: [], // 我的车牌号 
    defaultPlateNumber: '', //默认车牌号
    confirmShow: true, //年检提示显示
    year: (new Date()).getFullYear(), // 获取当前年份
    nextYear: '', //下次年检年份
    numArray: [], // 剩余天数的数组
    city: '', //存放地区城市
    station: '', //存放县区
    multiArray: [
      [],
      []
    ],
    dealCity:'',
    multiIndex: [0, 0],
    status: 1, // 年检状态，0 是不到3个月，1是3月之内未办理，2是3月之内已办理
    contentItems: [{
        title: '6年免检',
        content: `因为 wx:if 之中的模板也可能包含数据绑定，所有当 wx:if 的条件值切换时，框架有一个局部渲染的过程，因为它会确保条件块在切换时销毁或重新渲染。
        同时 wx:if 也是惰性的，如果在初始渲染条件为 false，框架什么也不做，在条件第一次变成真的时候才开始局部渲染。
        相比之下，hidden 就简单的多，组件始终会被渲染，只是简单的控制显示与隐藏。
        一般来说，wx:if 有更高的切换消耗而 hidden 有更高的初始渲染消耗。因此，如果需要频繁切换的情景下，用 hidden 更好，如果在运行时条件不大可能改变则 wx:if 较好。
        
        作者：埃斯库罗斯丶
        链接：https://www.jianshu.com/p/a1b7c5f7f113
        来源：简书
        著作权归作者所有。商业转载请联系作者获得授权，非商业转载请注明出处。`
      },
      {
        title: '上线年检',
        content: `原始解决方案
        在没有搞清这个方法前，我制作月历是使用的条件渲染。具体做法是，每个日期节点准备两个 DOM 元素，一个带有 class="selected" ，一个没有， 经过列表渲染之后每个单位实际上存在两个逻辑上的元素，这个时候通过点击改变 Page 中 data 里面的 selectedDate 和 selectedDate ，进一步控制 wx:if 的条件来实现元素的渲染与否。        
        作者：埃斯库罗斯丶
        链接：https://www.jianshu.com/p/a1b7c5f7f113
        来源：简书
        著作权归作者所有。商业转载请联系作者获得授权，非商业转载请注明出处。`
      },
      {
        title: '逾期危害',
        content: `这个方法绑定了一个动态的 class 名，用一个变量 _num 可以做到切换 class 的作用，当点击元素时，js 获取到节点上 data-num 上的值，这里将值赋给变量 _num ，相应的由于是数据驱动，节点上的 class 名经过计算变化为 cur ，其他的同理。`
      },
      {
        title: '常见问题',
        content: `有些场景需要从微信小程序跳转到H5页面，通常网上的教程会告诉你使用web-view组件就可以了，但实际开发中还有很多需要注意的地方，尤其是很多概念往往会把初学者弄糊涂了，下面就让我们从概念开始吧！

        微信小程序：虽然开发方法类似网页，但实际上是一种只能运行在微信自己开发的浏览器中的特殊网页，它所能够使用的所有功能都必须由微信浏览器提供；
        H5页面：这是真正的网页应用，运行在通用浏览器中，各种浏览器虽然在细微上有所差别，但总的来说是一致的，微信浏览器同时也是一种通用浏览器，能够支持真正的网页应用。
        
        因此我们才有可能在微信小程序和H5页面之间进行跳转，但这种跳转是受到微信浏览器的严格控制的，因此我们有必要了解这些控制包括哪些。
        
        H5页面所在的域名：假设你需要调转的H5页面URL为https://www.mysite.com/h5page，那么这里所说的域名就是www.mysite.com，另外你没有看错，这个URL必须是https，如果你还没有为你的网站加上SSL，那么就先去申请一个证书吧（注意必须是公开申请的证书，不能是自签名的，微信不认哦！）
        
        好了，这些都准备好了，让我们开始开发一个小例子。
        由于web-view组件是一个全屏组件，不能和其它小程序组件合用，因此需要独立占据一个页面，所以我们到例子就是在小程序的A页面加一个链接，跳转到B页面，然后在B页面使用web-view组件来加载H5页面。
        A页面
        
        作者：敬亭阁主
        链接：https://www.jianshu.com/p/3c8e84c6e67d
        来源：简书
        著作权归作者所有。商业转载请联系作者获得授权，非商业转载请注明出处。`
      },
    ],
    anchor: {
			deviceHeight: 0,
      anchorTop: 0,
      anchorBottom: 0,
      anchorScreenBottom: 0
		},
    currentTab: 0,
    plateSwitchShow:false,// 切换车牌的弹窗显示
    selectedIndex:0,// 选中的车辆的
    userInfoTrue: false,
    latitude: '',
    longitude: '',
    showCon:false,//设置提示显示
  },
  // 我的年检记录
  recordeClick(){
    wx.navigateTo({
      url: '../inspectionRecord/index',  
    })
  },
  // 关闭年检提示
  closeConfirm: function () {
    let _that = this;
    _that.setData({
      confirmShow: false
    })
  },
  bindMultiPickerChange: function (e) {
    let city = this.data.multiArray[0]
    let county = this.data.multiArray[1]
    let index0 = e.detail.value[0]
    let index1 = e.detail.value[1]
    let dealCity = city[index0]+county[index1]
    console.log('picker发送选择改变，携带值为', e.detail.value)
    this.setData({
      dealCity,
    })
  },
  // 立即办理
  handleClick(){
    wx.navigateTo({
      url: '../inspectionFree/index',  
    })
  },
  handleClick1(){
    wx.showModal({
      // title: '弹窗标题',
      content: `请先核实车辆信息后再进行办理`,
      confirmText: "进行核实",
      cancelText: "取消",
      success: function (res) {
          console.log(res);
          if (res.confirm) {
            wx.navigateTo({
              url: '../addVehicle/index',  
            })
          }else{
              console.log('用户点击辅助操作')
          }
      }
  });
   
  },
  /*****获取地区-县区 */
  getCityStationPer: function () {
    let that = this
    that.setData({
      city: ['太原市', '吕梁市', '晋中市'], //存放地区
      station: {
        '太原市': ['小店区', '迎泽区', '杏花岭区', '尖草坪区', '万柏林区', '晋源区', '古交市'],
        '吕梁市': ['离石区', '文水县', '交城县', '柳林县', '岚县', '方山县'],
        '晋中市': ['榆次区', '太谷区', '榆社县', '左权县']
      }, //县区
    })
    that.data.multiArray[0] = that.data.city
    that.data.multiArray[1] = this.getArr(that.data.city[0], that.data.station);
    that.setData({
      multiArray: that.data.multiArray
    })
  },
  /****列发生改变 */
  bindMultiPickerColumnChange: function (e) {
    let that = this
    console.log('修改的列为', e.detail.column, '，值为', e.detail.value);
    var data = {
      multiArray: this.data.multiArray,
      multiIndex: this.data.multiIndex
    };
    console.log(that.data.multiArray[0][that.data.multiIndex[0]],that.data.multiArray[1][that.data.multiIndex[1]])
    data.multiIndex[e.detail.column] = e.detail.value;
    switch (e.detail.column) {
      case 0:
        //第一列改变  设置第二列数据
        let arr = that.getArr(that.data.city[e.detail.value], that.data.station)
        data.multiArray[1] = arr
        that.setData({
          multiArray: data.multiArray
        })
        // //从第二列中拿出第一项，设置第三组人员
        // let arrColumn2 = that.getArr(arr[0], that.data.perList)
        // data.multiArray[2] = arrColumn2
        // that.setData({
        //   multiArray: data.multiArray
        // })
        break;
        // case 1:
        //    //第二列改变 设置第三列数据
        //   let arr2 = that.getArr(data.multiArray[1][e.detail.value], that.data.perList)
        //   data.multiArray[2] = arr2
        //   that.setData({
        //     multiArray: data.multiArray
        //   })
        //   break;
    }
  },
  getArr: function (value, arr) {
    for (let i in arr) {
      if (value == i) {
        return arr[i]
      }
    }
  },
  // 
  openProcessedConfirm(){
    let _that = this;
    wx.showModal({
      content: `是否已完成本年度车辆年检办理？若确定办理将为您计算下次年检周期。`,
      confirmText: "确定",
      cancelText: "取消",
      success: function (res) {
          console.log(res);
          if (res.confirm) {
            _that.setData({
              status:2
            })            
          }else{
          }
      }
  });
  },
  //  点击tab切换逻辑
  swichNav: function (e) {
    var that = this;
    if (this.data.currentTab === e.target.dataset.current) {
      return false;
    } else {
      that.setData({
        currentTab: e.target.dataset.current
      })
    }
  },
  bindChange: function (e) {

    var that = this;
    that.setData({
      currentTab: e.detail.current
    });
    that.computeSwiperHeight(e.detail.current)
  },
  // tab 左右切换
	computeSwiperHeight(pageIndex) {
	  let getSwiperHeight = () => {
      let min = this.data.anchor.anchorScreenBottom - this.data.anchor.anchorTop;
      let value = this.data.anchor.anchorBottom - this.data.anchor.anchorTop
      return Math.max(min, value)
	  }
	  wx.createSelectorQuery()
      .select('.anchor-screen-bottom')
      .boundingClientRect()
      .selectViewport()
      .scrollOffset()
      .exec(res => {
        this.data.anchor.anchorScreenBottom = res[0].bottom
        console.log(res)
      })
	  wx.createSelectorQuery()
      .selectAll('.anchor-top')
      .boundingClientRect()
      .selectViewport()
      .scrollOffset()
      .exec(res => {
        this.data.anchor.anchorTop = res[0][pageIndex].top
        this.setData({
          'anchor.deviceHeight': getSwiperHeight()
        })
      })
	  wx.createSelectorQuery()
      .selectAll('.anchor-bottom')
      .boundingClientRect()
      .selectViewport()
      .scrollOffset()
      .exec(res => {
        this.data.anchor.anchorBottom = res[0][pageIndex].bottom
        this.setData({
          'anchor.deviceHeight': getSwiperHeight()
        })
      })
  },
  // 
  openPlateSwitchDialog(){
    this.setData({
      plateSwitchShow:true
    })
  },
  // 关闭车牌切换
  closePlateSwitchDialog(){
    this.setData({
      plateSwitchShow: false
    })
  },
  // 选择车辆
  selectPlate(e){
    let _that = this;
    let query = e.currentTarget.dataset['index'];
    let defaultPlateNumber = _that.data.plateNumber[query]
    let numArray = String(defaultPlateNumber.remainderTime).split('')
    let nextYear = defaultPlateNumber.nextTime.substring(0,4)
    _that.setData({
      defaultPlateNumber,
      numArray,
      nextYear,
      plateSwitchShow:false,
      selectedIndex : query
    })
  },
  onLoad: function () {
     // 这里写你自己的秘钥
     qqmapsdk = new QQMapWX({
      key: '3EUBZ-X3Z3K-BMPJ5-A2DMC-JH7QS-BPFLG' //自己的key秘钥 http://lbs.qq.com/console/mykey.html 在这个网址申请
    });
    let _that = this;
    let plateNumber = [
      {
        num: '豫A.12456',
        loginTime: '2020年6月',
        type:'非运营',
        seatsNum :5,
        nextTime: '2022年07月18日', //下次年检时间
        remainderTime: 455, //下次年检剩余天数
      }, 
      {
        num: '豫A.888888',
        loginTime: '2010年12月',
        type:'非运营',
        seatsNum :5,
        nextTime: '2021年07月18日', //下次年检时间
        remainderTime: 55, //下次年检剩余天数
      }
    ]; 
    let defaultPlateNumber = plateNumber[0]
    let numArray = String(defaultPlateNumber.remainderTime).split('')
   
    let nextYear = defaultPlateNumber.nextTime.substring(0,4)
     _that.setData({
      plateNumber, // 我的车牌号
      defaultPlateNumber, //默认车牌号
      numArray,
      nextYear, // 下次年检的年份
    });
    this.getCityStationPer();
  },
  closeDialog(){
    this.setData({
      userInfoTrue:false
    })
  },
  // 关闭设置
  changeModalCancel(){
    this.setData({
      showCon:false
    })
    this.onLoad()
  },
  // 获取位置
  getUserLocation: function () {
    let vm = this;
    wx.getSetting({
      success: (res) => {
        console.log("getSetting");
        console.log(res)
        // res.authSetting['scope.userLocation'] == undefined    表示 初始化进入该页面
        // res.authSetting['scope.userLocation'] == false    表示 非初始化进入该页面,且未授权
        // res.authSetting['scope.userLocation'] == true    表示 地理位置授权
        if (res.authSetting['scope.userLocation'] != undefined && res.authSetting['scope.userLocation'] != true) {
          wx.showModal({
            title: '请求授权当前位置',
            content: '需要获取您的地理位置，请确认授权',
            success: function (res) {
              if (res.cancel) {
                wx.showToast({
                  title: '拒绝授权',
                  icon: 'none',
                  duration: 1000
                })
              } else if (res.confirm) {
                wx.openSetting({
                  success: function (dataAu) {
                    if (dataAu.authSetting["scope.userLocation"] == true) {
                      wx.showToast({
                        title: '授权成功',
                        icon: 'success',
                        duration: 1000
                      })
                      //再次授权，调用wx.getLocation的API
                      vm.getLocation();
                    } else {
                      wx.showToast({
                        title: '授权失败',
                        icon: 'none',
                        duration: 1000
                      })
                    }
                  }
                })
              }
            }
          })
        } else if (res.authSetting['scope.userLocation'] == undefined) {
          //调用wx.getLocation的API
          vm.getLocation();
        } else {
          //调用wx.getLocation的API
          vm.getLocation();
        }
      }
    })
  },
  // 微信获得经纬度
  getLocation: function () {
    let vm = this;
    wx.getLocation({
      type: 'wgs84',
      success: function (res) {
        console.log("getLocation");
        console.log(res)
        var latitude = res.latitude
        var longitude = res.longitude
        var speed = res.speed
        var accuracy = res.accuracy;
        vm.getLocal(latitude, longitude)
      },
      fail: function (res) {
        vm.setData({
          showCon: true
        })
      }
    })
  },
  // 获取当前地理位置
  getLocal: function (latitude, longitude) {
    let vm = this;
    qqmapsdk.reverseGeocoder({
      location: {
        latitude: latitude,
        longitude: longitude
      },
      success: function (res) {
        console.log("getLocal");
        console.log(res);
        let district = res.result.ad_info.district
        let city = res.result.ad_info.city
        let dealCity= city + district
        console.log(dealCity)
        vm.setData({
          dealCity,
          latitude: latitude,
          longitude: longitude
        })

      },
      fail: function (res) {
        console.log("fail");
        console.log(res);
      },
      complete: function (res) {
        // console.log(res);
      }
    });
  },
  onReady: function() {
		this.computeSwiperHeight(0)
  },
  onShow: function () {
    let vm = this;
    vm.getUserLocation();
  },
  getUserInfo: function (e) {},
  
})